<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title></title>
<meta name="description" content="overview &amp; stats" />
<meta name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
#@includeBaseCss()
<style type="text/css">
	
</style>
</head>

<body class="no-skin">
<div class="main-container" id="main-container">

	<div claaa="widget-box">
		<div class="widget-header widget-header-blue widget-header-flat">
			<h4 class="widget-title lighter">操作步骤</h4>
		</div>
		<div class="widget-boby">
			<!--  -->
			<div class="widget-main">
				<div id="fuelux-wizard-container" class="no-steps-container">
					<div>
						<ul class="steps" style="margin-left: 0;">

							<li data-step="1" class="active">
								<span class="step">1</span>
								<span class="title">添加基本信息</span>
							</li>	
							<li data-step="2">
								<span class="step">2</span>
								<span class="title">添加会员信息</span>
							</li>
							<li data-step="3">
								<span class="step">3</span>
								<span class="title">添加附属信息</span>
							</li>								
						</ul>
					</div>
					<hr>
					<div class="step-content pos-rel">
							<div class="step-pane active" data-step="1">
														<h3 class="lighter block green">Enter the following information</h3>

														<form class="form-horizontal" id="validation-form" method="get" novalidate="novalidate">
															<div class="form-group has-error">
																<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="email">Email Address:</label>

																<div class="col-xs-12 col-sm-9">
																	<div class="clearfix">
																		<input type="email" name="email" id="email" class="col-xs-12 col-sm-6" aria-required="true" aria-describedby="email-error">
																	</div><div id="email-error" class="help-block">Please provide a valid email.</div>
																</div>
															</div>

															

														

															<div class="form-group has-error">
																<label class="control-label col-xs-12 col-sm-3 no-padding-right">Gender</label>

																<div class="col-xs-12 col-sm-9">
																	<div>
																		<label class="line-height-1 blue">
																			<input name="gender" value="1" type="radio" class="ace" aria-required="true" aria-describedby="gender-error">
																			<span class="lbl"> Male</span>
																		</label>
																	</div>

																	<div>
																		<label class="line-height-1 blue">
																			<input name="gender" value="2" type="radio" class="ace">
																			<span class="lbl"> Female</span>
																		</label>
																	</div>
																<div id="gender-error" class="help-block">Please choose gender</div></div>
															</div>

															<div class="hr hr-dotted"></div>

															

														
															<div class="space-2"></div>

															<div class="form-group has-error">
																<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="comment">Comment</label>

																<div class="col-xs-12 col-sm-9">
																	<div class="clearfix">
																		<textarea class="input-xlarge" name="comment" id="comment" aria-required="true" aria-describedby="comment-error"></textarea>
																	</div><div id="comment-error" class="help-block">This field is required.</div>
																</div>
															</div>

															<div class="space-8"></div>

															<div class="form-group has-error">
																<div class="col-xs-12 col-sm-4 col-sm-offset-3">
																	<label>
																		<input name="agree" id="agree" type="checkbox" class="ace" aria-required="true" aria-describedby="agree-error">
																		<span class="lbl"> I accept the policy</span><div id="agree-error" class="help-block">Please accept our policy</div>
																	</label>
																</div>
															</div>
														</form>
							</div>
							<div class="step-pane" data-step="2">
														<div>
															<div class="alert alert-success">
																<button type="button" class="close" data-dismiss="alert">
																	<i class="ace-icon fa fa-times"></i>
																</button>

																<strong>
																	<i class="ace-icon fa fa-check"></i>
																	Well done!
																</strong>

																You successfully read this important alert message.
																<br>
															</div>

															<div class="alert alert-danger">
																<button type="button" class="close" data-dismiss="alert">
																	<i class="ace-icon fa fa-times"></i>
																</button>

																<strong>
																	<i class="ace-icon fa fa-times"></i>
																	Oh snap!
																</strong>

																Change a few things up and try submitting again.
																<br>
															</div>

															<div class="alert alert-warning">
																<button type="button" class="close" data-dismiss="alert">
																	<i class="ace-icon fa fa-times"></i>
																</button>
																<strong>Warning!</strong>

																Best check yo self, you're not looking too good.
																<br>
															</div>

															<div class="alert alert-info">
																<button type="button" class="close" data-dismiss="alert">
																	<i class="ace-icon fa fa-times"></i>
																</button>
																<strong>Heads up!</strong>

																This alert needs your attention, but it's not super important.
																<br>
															</div>
														</div>
													</div>
					</div>
				</div>
				<hr>
				<div class="wizard-actions">
					<button class="btn btn-prey" disabled="disabled">上一步</button>
					<button class="btn btn-success btn-next" data-last="Finish">下一步</button>
				</div>
			</div>
		</div>
		
	</div>




 
</div>

  #@footer()
  <!-- basic scripts -->
  #@includeBaseJs()
  <script type="text/javascript">
    $(document).ready(function() {
      var grid_selector = "#grid-table";
      var pager_selector = "#grid-pager";

      resize(grid_selector);

      $("#grid-table").jqGrid({
        url : "#(ctx)/storeStaff/getListData",
        mtype : "GET",
        datatype : "json",
        colModel : [ {
          label : '序号',
          name : 'id',
          key : true,
          width : 30,
          sortable : false
        }, {
          label : '普通输入框',
          name : 'remark',
          width : 40,
          sortable : false
        }, {
          label : '下拉选择',
          name : 'status',
          formatter : isStatus,
          width : 30,
          sortable : false
        }, {
          label : '创建时间',
          name : 'create_time',
          width : 30,
          sortable : false
        }, {
          label : '更新时间',
          name : 'update_time',
          width : 30,
          sortable : false
        } ],
        viewrecords : true,
        // 设置当查询记录条数是0的情况下，jqGrid上显示的信息。只有当viewrecords选项设置为true才有效。
        emptyrecords : "未查询到数据",
        height : 280,
        rowNum : 15,
        multiselect : true,//checkbox多选
        altRows : true,//隔行变色
        recordtext : "{0} - {1} 共 {2} 条",
        pgtext : "第 {0} 页 共 {1} 页",
        pager : pager_selector,
        loadComplete : function() {
          var table = this;
          setTimeout(function() {
            updatePagerIcons(table);
          }, 0);
        }
      });

      $(window).triggerHandler('resize.jqGrid');

      //查询按钮
      $("#btn_search").click(function() {
        //此处可以添加对查询数据的合法验证  
        var name = $("#name").val();
        $("#grid-table").jqGrid('setGridParam', {
          datatype : 'json',
          postData : {
            'name' : name
          }, //发送数据  
          page : 1
        }).trigger("reloadGrid"); //重新载入  
      });

      //添加按钮
      $("#btn-add").click(function() {//添加页面
        parent.layer.open({
          title : '添加应用',
          type : 2,//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
          area : [ '770px', '530px' ],//宽高
          fix : false, //不固定
          maxmin : true,//显示最大小化按钮
          content : "#(ctx)/storeStaff/addStoreStaff" //iframe的url
        });
      });

      //编辑按钮
      $("#btn-edit").click(function() {//添加页面
        var rid = getOneSelectedRows($("#grid-table"));
        if (rid == -1) {
          layer.msg("请选择一项", {
            icon : 2,
            time : 2000
          //2秒关闭（如果不配置，默认是3秒）
          });
        } else if (rid == -2) {
          layer.msg("只能选择一项", {
            icon : 2,
            time : 2000
          //2秒关闭（如果不配置，默认是3秒）
          });
        } else {
          parent.layer.open({
            title : '修改应用',
            type : 2,
            area : [ '770px', '530px' ],
            fix : false, //不固定
            maxmin : true,
            content : "#(ctx)/storeStaff/addStoreStaff?id=" + rid
          });
        }
      });

      //删除按钮
      $("#btn-del").click(function() {
        var rid = getOneSelectedRows($("#grid-table"));
        if (rid == -1) {
          layer.msg("请选择一个应用", {
            icon : 2,
            time : 2000
          //2秒关闭（如果不配置，默认是3秒）
          });
          return;
        }
        
        layer.confirm('确定要删除吗？', {
          icon: 3,
          title:'注意',
          btn: ['确定', '取消'] 
        }, function(index){
          delObj();
          layer.close(index);
        }, function(index){
           layer.close(index); 
        });
        
      
      });

    });

    //格式化状态显示
    function isStatus(cellvalue, options, rowObject) {
      if (cellvalue == 1) {
        return '<span class="label label-sm label-info">启用</span>';
      } else{
        return '<span class="label label-sm label-important">禁用</span>';
      } 
    }

    function reloadGrid() {
      $("#grid-table").trigger("reloadGrid"); //重新载入
    }
    
    function delObj(){
      
      var submitData = {
        "ids" : getSelectedRows($("#grid-table")) 
      };
      $.post("#(ctx)/storeStaff/delStoreStaff", submitData, function(data) {

        if (data.code == 0) {
          layer.msg("删除成功", {
            icon : 1,
            time : 1000
          //1秒关闭（如果不配置，默认是3秒）
          }, function() {
            reloadGrid();
          });

        } else {
          layer.alert("操作失败");
        }
      }, "json");
    }

  </script>

</body>
</html>